<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <title>景植</title>
    <link th:href="@{/bootstrap/css/bootstrap.css}" rel="stylesheet">
    <link th:href="@{/css/carousel.css}" rel="stylesheet">


</head>
<body class="bg-dark">

<div th:replace="~{header::header(activeUrl='index.html')}"></div>

<main>

    <div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true"
                    aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
        </div>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img th:src="@{/img/homepage/bgimg2.jpg}" alt=""/>
                <div class="container">
                    <div class="carousel-caption text-start">
                        <h1>检索</h1>
                        <p>检索您心仪的景观植物数据</p>
                        <p><a class="btn btn-lg btn-primary" href="#search1">开始</a></p>
                    </div>
                </div>
            </div>
            <div class="carousel-item">
                <img th:src="@{/img/homepage/bgimg1.jpg}" alt=""/>
                <div class="container">
                    <div class="carousel-caption text-end">
                        <h1>分享</h1>
                        <p>和各位网友分享您对景观植物搭配的独到见解</p>
                        <p><a class="btn btn-lg btn-primary" href="#">开始</a></p>
                    </div>
                </div>
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">上一张</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">下一张</span>
        </button>
    </div>
    <div class="row align-items-md-stretch">
        <div class="col-md-6">
            <div class="h-100 p-5 text-white bg-dark rounded-3">
                <h2 align="center">根据条件搜索</h2>
                <p align="center">通过提供的条件检索心仪的景观植物</p>
            </div>
        </div>
<!--        搜索栏外部选择组件-->
        <div class="col-md-6">
            <div class="h-100 p-5 bg-light border rounded-3">
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="name-tab" data-bs-toggle="tab" data-bs-target="#name"
                                type="button" role="tab" aria-controls="name" aria-selected="true">名称
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="type-tab" data-bs-toggle="tab" data-bs-target="#type"
                                type="button" role="tab" aria-controls="type" aria-selected="false">植物类型
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="branch-type-tab" data-bs-toggle="tab" data-bs-target="#branch-type"
                                type="button" role="tab" aria-controls="branch-type" aria-selected="false">枝形
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="flower-time-tab" data-bs-toggle="tab" data-bs-target="#flower-time"
                                type="button" role="tab" aria-controls="flower-time" aria-selected="false">花期
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="height-tab" data-bs-toggle="tab" data-bs-target="#height"
                                type="button" role="tab" aria-controls="height" aria-selected="false">成株高度
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="crown-tab" data-bs-toggle="tab" data-bs-target="#crown"
                                type="button" role="tab" aria-controls="crown" aria-selected="false">冠幅
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="diameter-tab" data-bs-toggle="tab" data-bs-target="#diameter"
                                type="button" role="tab" aria-controls="diameter" aria-selected="false">胸径
                        </button>
                    </li>
                </ul>
                <div class="tab-content" id="myTabContent">
                    <div class="tab-pane fade show active" id="name" role="tabpanel" aria-labelledby="name-tab">
                        <form class="form-inline" id="search-name-form">
                            <div class="input-group">
                                <input type="text" class="form-control input-sm" placeholder="输入植物名称" id="search-name-input"
                                       value="">
                                <span class="input-group-btn">
                                    <button class="btn btn-lg btn-primary btn-block mt-1" type="submit">查找</button>
                            	</span>
                            </div>
                        </form>
                    </div>
                    <div class="tab-pane fade" id="type" role="tabpanel" aria-labelledby="type-tab">
                        <form class="form-inline" id="search-type-form">
                            <div class="input-group">
                                <input type="text" class="form-control input-sm" placeholder="输入植物类型" id="search-type-input"
                                       value="">
                                <span class="input-group-btn">
                                    <button class="btn btn-lg btn-primary btn-block mt-1" type="submit">查找</button>
                            	</span>
                            </div>
                        </form>
                    </div>
                    <div class="tab-pane fade" id="branch-type" role="tabpanel" aria-labelledby="contact-tab">
                        <form class="form-inline" id="search-branch-type-form">
                            <div class="input-group">
                                <input type="text" class="form-control input-sm" placeholder="输入植物枝形" id="search-branch-type-input"
                                       value="">
                                <span class="input-group-btn">
                                    <button class="btn btn-lg btn-primary btn-block mt-1" type="submit">查找</button>
                            	</span>
                            </div>
                        </form>
                    </div>
                    <div class="tab-pane fade" id="flower-time" role="tabpanel" aria-labelledby="profile-tab">
                        <form class="form-inline" id="search-flower-time-form">
                            <div class="input-group">
                                <input type="text" class="form-control input-sm" placeholder="输入植物花期月份，如在5月开花，输入5" id="search-flower-time-input"
                                       value="">
                                <span class="input-group-btn">
                                    <button class="btn btn-lg btn-primary btn-block mt-1" type="submit">查找</button>
                            	</span>
                            </div>
                        </form>
                    </div>
                    <div class="tab-pane fade" id="height" role="tabpanel" aria-labelledby="contact-tab">
                        <form class="form-inline" id="search-height-form">
                            <div class="input-group">
                                <input type="text" class="form-control input-sm" placeholder="输入植物成株的高度，默认单位米，如成株高度2米，输入2" id="search-height-input"
                                       value="">
                                <span class="input-group-btn">
                                    <button class="btn btn-lg btn-primary btn-block mt-1" type="submit">查找</button>
                            	</span>
                            </div>
                        </form>
                    </div>
                    <div class="tab-pane fade" id="crown" role="tabpanel" aria-labelledby="profile-tab">
                        <form class="form-inline" id="search-crown-form">
                            <div class="input-group">
                                <input type="text" class="form-control input-sm" placeholder="输入植物冠幅，默认单位米，如冠幅1米，输入1" id="search-crown-input"
                                       value="">
                                <span class="input-group-btn">
                                    <button class="btn btn-lg btn-primary btn-block mt-1" type="submit">查找</button>
                            	</span>
                            </div>
                        </form>
                    </div>
                    <div class="tab-pane fade" id="diameter" role="tabpanel" aria-labelledby="contact-tab">
                        <form class="form-inline" id="search-diameter-form">
                            <div class="input-group">
                                <input type="text" class="form-control input-sm" placeholder="输入植物胸径，默认单位厘米，如胸径50厘米，输入50" id="search-diameter-input"
                                       value="">
                                <span class="input-group-btn">
                                    <button class="btn btn-lg btn-primary btn-block mt-1" type="submit">查找</button>
                            	</span>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>


</main>


<script th:src="@{js/jquery-3.5.1.min.js}"></script>
<script th:src="@{bootstrap/js/bootstrap.js}"></script>
<script th:src="@{bootstrap/js/bootstrap.bundle.js}"></script>



</body>
</html>
